<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-19 11:11:44
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-24 13:43:30
 * @Description: 侧边栏
-->
<template>
  <aside class="sidebar">
    <!-- Logo -->
    <div class="logo none-select">
      <img id="logo-img" class="logo-item" src="../assets/imgs/logo_img.svg" alt="" />
      <img id="logo-text" class="logo-item" src="../assets/imgs/logo_text.svg" alt="" />
    </div>

    <div class="line none-select"></div>

    <!-- burger -->
    <a @click="cilckBurger()" class="burger pointer">
      <HamburgerButton theme="outline" size="32" :strokeWidth="3" />
    </a>

    <!-- Menu -->
    <div class="menu">
      <!-- Admin tools -->
      <div class="admin-tools none-select">Admin tools</div>
      <ul class="menu-list">
        <!-- overview -->
        <router-link to="/">
          <li id="overview" @click="navChose($event)" class="none-select">
            <AllApplication class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">OverView</span>
          </li>
        </router-link>
        <!-- products -->
        <router-link to="/products">
          <li id="products" @click="navChose($event)" class="none-select">
            <AdProduct class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Products</span>
          </li>
        </router-link>
        <!-- campaingns -->
        <router-link to="/campaigns">
          <li id="campaingns" @click="navChose($event)" class="none-select">
            <ApplicationTwo class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Campaingns</span>
          </li>
        </router-link>
        <!-- schedules -->
        <router-link to="/schedules">
          <li id="schedules" class="none-select" @click="navChose($event)">
            <CalendarDot class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Schedules</span>
          </li>
        </router-link>
        <router-link to="/payouts">
          <li id="payouts" @click="navChose($event)" class="none-select">
            <ExpensesOne
              class="icon"
              theme="outline"
              size="24"
              :fill="false"
              :strokeWidth="3"
            />
            <span class="headline">Payouts</span>
          </li>
        </router-link>
        <router-link to="/statement">
          <li id="statement" @click="navChose($event)" class="none-select">
            <OrderIcon class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Statement</span>
          </li>
        </router-link>
        <router-link to="/settings">
          <li id="settings" @click="navChose($event)" class="none-select">
            <SettingTwo class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Setting</span>
          </li>
        </router-link>
      </ul>
      <!-- Insights -->
      <div class="insights none-select">Insights</div>
      <ul class="insights-list none-select">
        <router-link to="/inbox">
          <li id="inbox" @click="navChose($event)" class="insights-item">
            <MailIcon class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Inbox</span>
          </li>
        </router-link>
        <router-link to="/notifications">
          <li id="notifications" @click="navChose($event)" class="insights-item">
            <RemindIcon class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Notifications</span>
          </li>
        </router-link>
        <router-link to="/comments">
          <li id="comments" @click="navChose($event)" class="insights-item">
            <MessageIcon class="icon" theme="outline" size="24" :strokeWidth="3" />
            <span class="headline">Comments</span>
            <span class="red-dot fr">20</span>
          </li>
        </router-link>
      </ul>
    </div>

    <!-- account -->
    <div class="account none-select">
      <img class="avatar" height="40" width="40" src="../assets/imgs/avatar.svg" alt="" />
      <span class="account-name">Li Zengkun</span>
      <span class="account-type">Free account</span>
    </div>
  </aside>
</template>

<script>
export default {
  data() {
    return {
      url: "",
      isNavOpen: true,
    };
  },
  mounted() {
    this.url = window.location.href;
    let url = this.url;
    console.log(url);
    console.log(url.includes("products"));

    if (url.includes("products")) {
      document.getElementById("products").classList.add("menu-active");
    } else if (url.includes("campaigns")) {
      document.getElementById("campaigns").classList.add("menu-active");
    } else if (url.includes("schedules")) {
      document.getElementById("schedules").classList.add("menu-active");
    } else if (url.includes("payouts")) {
      document.getElementById("payouts").classList.add("menu-active");
    } else if (url.includes("statement")) {
      document.getElementById("statement").classList.add("menu-active");
    } else if (url.includes("settings")) {
      document.getElementById("settings").classList.add("menu-active");
    } else if (url.includes("inbox")) {
      document.getElementById("inbox").classList.add("menu-active");
    } else if (url.includes("notifications")) {
      document.getElementById("notifications").classList.add("menu-active");
    } else if (url.includes("comments")) {
      document.getElementById("comments").classList.add("menu-active");
    } else {
      document.getElementById("overview").classList.add("menu-active");
    }
  },

  components: {},

  methods: {
    // Nav的展开与缩放
    cilckBurger() {
      if (this.isNavOpen) {
        document.documentElement.style.setProperty("--sidebar-width", "96px");
        document.documentElement.style.setProperty("--logo-text-width", "0px");
        document.documentElement.style.setProperty("--logo-margin-top", "80px");
        document.documentElement.style.setProperty("--red-dot-size", "10px");
        document.documentElement.style.setProperty("--logo-height", "76px");
        document.documentElement.style.setProperty("--logo-line", "96px");
        document.documentElement.style.setProperty("--menu-margin-top", "76px");
      } else {
        document.documentElement.style.setProperty("--sidebar-width", "256px");
        document.documentElement.style.setProperty("--logo-text-width", "70.17px");
        document.documentElement.style.setProperty("--logo-margin-top", "0");
        document.documentElement.style.setProperty("--red-dot-size", "24px");
        document.documentElement.style.setProperty("--logo-height", "96px");
        document.documentElement.style.setProperty("--logo-line", "0");
        document.documentElement.style.setProperty("--menu-margin-top", "0px");
      }
      this.isNavOpen = !this.isNavOpen;
    },

    // 导航跳转
    navChose(ev) {
      let e = ev.currentTarget;
      console.log(e);
      this.clearNavActive();
      e.classList.add("menu-active");
    },
    // 清除active
    clearNavActive() {
      document.getElementsByClassName("menu-active")[0].classList.remove("menu-active");
    },
  },
};
</script>

<style scoped></style>
